// ast语法树 使用对象来描述原生语法  虚拟dom 用对象来描述DOM节点
// arguments[0] = 匹配到的标签
// arguments[1] = 匹配到的标签名
const ncname = `[a-zA-Z_][\\-\\.0-9_a-zA-Z]*`;
const qnameCapture = `((?:${ncname}\\:)?${ncname})`;
const startTagOpen = new RegExp(`^<${qnameCapture}`); // 标签开头的正则，捕获的内容时标签名
const endTag = new RegExp(`^<\\/${qnameCapture}[^>]*>`); //匹配标签的结尾
const attribute = /^\s*([^\s"'<>\/=]+)(?:\s*(=)\s*(?:"([^"]*)"+|'([^']*)'+|([^\s"'=<>`]+)))?/
const startTagClose = /^\s*(\/?)>/  // 起始闭合标签
const defaultTagRE = /\{\{((?:.|\n)+?)\}\}/g; // {{}} 就是匹配这个

function start(tagName, attrs) {
    // console.log('开始标签', tagName, '属性是:', attrs);
}

function chars(text) {
    // console.log("文本是:", text)
}

function end(tagName) {
    // console.log("结束标签:", tagName)
}

function parseHTML(html) {
    while (html) {
        let textEnd = html.indexOf('<');
        if (textEnd == 0) {
            // 如果当前索引为 0 肯定是一个标签 开始标签 结束标签
            let startTagMatch = parseStartTag(); // 通过这个方法获取到匹配的结果 tagName,attrs
            if (startTagMatch) {
                start(startTagMatch.tagName, startTagMatch.attrs);
                continue; // 如果开始标签匹配完毕，继续下一次匹配
            }
            let endTagMatch = html.match(endTag)
            if(endTagMatch){
                advance(endTagMatch[0].length)
                end(endTagMatch[1])
                continue;
            }
        }
        let text;
        if (textEnd >= 0) {
            text = html.substring(0, textEnd);
        }
        if (text) {
            advance(text.length);
            chars(text);
        }
    }
    function advance(n) {
        html = html.substring(n);
    }

    function parseStartTag() {
        let start = html.match(startTagOpen);
        if (start) {
            const match = {
                tagName: start[1],
                attrs: []
            }
            advance(start[0].length) // 将标签删除
            let end, attr;
            while (!(end = html.match(startTagClose)) && (attr = html.match(attribute))) {
                // 将属性进行解析
                advance(attr[0].length); // 属性去掉
                match.attrs.push({ name: attr[1], value: attr[3] || attr[4] || attr[5] })
            }
            if (end) { // 去掉开始标签的 >
                advance(end[0].length);
                return match
            }
        }
    }
}


export function compileToFunction(template) {
    let root = parseHTML(template);
    return function render() {

    }
}